<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    {$LOAD_STYLE.top|raw}
</head>
<script src="__TPL_JS__/zepto.min.js"></script>
<script src="__TPL_JS__/zepto.weui.js"></script>
<script src="__JS__/clipboard.min.js"></script>
<style type="text/css">
body{
    background: #FFF;
}
.bgGreen{background:#1BC5BB !important;}
.bgRed{background:#EE4B47 !important;}
.box{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.box,.box2{
	width:100%;
	text-align:center; color:#FFF;
	font-size:14px;
	margin:5px;border:solid 1px #f3f3f3;
	border-radius: 10px;
}
.box2{
	border:none;
}
.title{
    color:#8A8A8A;
    padding: 20px;
    text-align: center;
}
.color{
    background:#FFF;
}
.color2{
    text-align: center;
    color: #8A8A8A;
    background:linear-gradient(to bottom,#F6F6F6,#d6d6d6);
}
.color3{
    font-size: 14px;
    line-height: 50px;
    text-align: center;
    color: #8A8A8A;
    font-size: 12px;
    background:#FFF;
}

.pc-class .color,.pc-class .color2,.pc-class .color3{
	margin: 5px auto;
	width:100px; height:100px;
	border-radius: 50%;
	/* box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.4); */
}
.pc-class .color2{
	font-size: 14px;
	line-height: 100px;
}
.pc-class .text{
    color:#666;
    font-size: 16px;
    padding: 3px;
    margin-bottom: 0px;
}
.pc-class{
	width: 750px;
}
.pc-class .box,.pc-class .box2{
	border: none;
}
.pc-but-box{
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 20px;
	width: 710px;
}


.wap-class .color,.wap-class .color2,.wap-class .color3{
	margin: 5px auto;
	width:76px; height:76px;
	border-radius: 50%;
	/* box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.4); */
}
.wap-class .color2{
	font-size: 12px;
	line-height: 76px;
}
.wap-class .text{
    color:#666;
    font-size: 14px;
    padding: 3px;
    margin-bottom: 0px;
}
.wap-class .text2{
    color:#C00000;
    font-size: 12px;
    padding: 0px;
    margin-bottom: 0px;
}
.wap-class,.wap-but-box{
	width: 100%;
}
.wap-but-box{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 90%;
	margin:20px;
}
</style>
<body>

{if $terminal=='wap'}
<div class="weui-btn_primary weui-header">
	<div class="weui-header-left"> <a class="icon icon-109 f-white" href="{:U('Fabric/info',['id'=>$id,'k'=>$token,'ssid'=>$uuid])}"></a>  </div>
	<h1 class="weui-header-title">电子色卡</h1>
</div>
{/if}
	
<div id="imgDiv" class="{$terminal}-class">
    <div class="title" style="margin:0px;">以下为电子色卡，仅供参考，与实际面料颜色会有一定的色差，如需色卡请联系客服索取</div>
    <div class="weui-flex">
        {php}
            $i=1;
            foreach($T as $v){
				$str='';
                $copytext = $v['sup_code'] . "\n" . $v['sup_color'] . '#' . $v['color_name'];
                if($v['rose']<=0 && $v['sup_rose']<=0){
                    $str.='<p></p>';
                }else{
					if($price===1){
						$str.='<p style="padding:3px"><span style="color:#C00000">+'.$v['rose'].' 元 </span>';
						if($v['rose']!=$v['sup_rose']){
							 $str.='<span style="color:#CCC"> +'.$v['sup_rose'].' 元</span>';
						}
						$str.='</p>';
					}
				}
				if($source==1){
					if($v['color_code']==$v['sup_color']){
						$str.='<div class="text2"></div>';
					}else{
						$str.='<div class="text2">'.$v['sup_code'].' # '.$v['sup_color'].'</div>';
					}
				}
                if($v['color_name']=="白" || $v['color_name']=="白色" || $v['color_name']=="本白" || $v['color_name']=="蓝光白" || $v['color_name']=="漂白" || $v['color_name']=="漂白色"){
                   $v['color_hex']="F5F5F5"; 
                }
                if($v['gray']==1){
                    echo '<div class="box copybut" data-clipboard-text="'.$copytext.'"><div class="color2">花灰咨询客服</div><div class="text">'.$v['color_code'].' # '.$v['color_name'].'</div>'.$str.'</div>';
                }elseif($v['gray']==2){
                    echo '<div class="box copybut" data-clipboard-text="'.$copytext.'"><div class="color2">花色</div><div class="text">'.$v['color_code'].' # '.$v['color_name'].'</div>'.$str.'</div>';
                }elseif($v['color_hex']==''){
                    echo '<div class="box copybut" data-clipboard-text="'.$copytext.'"><div class="color3">[ 暂无 ]</div><div class="text">'.$v['color_code'].' # '.$v['color_name'].'</div>'.$str.'</div>';
                }else{
                    echo '<div class="box copybut" data-clipboard-text="'.$copytext.'"><div class="color" style="background:#'.$v['color_hex'].'"></div><div class="text">'.$v['color_code'].' # '.$v['color_name'].'</div>'.$str.'</div>';
                }
                if($i%$col == 0 ){
                    echo '</div><div class="weui-flex">';
                }
                //if(count($T)==$i){
                //    for($j=0;$j<$lastcount;$j++){
                //        echo '<div class="box2"></div>';
                //    }
                //}
                $i++;
            }
        {/php}
	</div>
</div>

<div class="{$terminal}-but-box">
	{if $terminal=='pc'}
	<button class="weui-btn weui-btn_primary" id="btn">保存电子色卡图</button>
	{/if}
	<p style="margin-top: 20px;">
		<a class="weui-btn weui-btn_default" href="{:U('Fabric/color',['id'=>$id,'source'=>$source==1?0:1])}">{$source==1?'隐藏':'显示'}参数</a>
	</p>
</div>

<script src="__JS__/html2canvas.min.js"></script>

<script>	
	$(document).ready(function(){
        // 初始化 ClipboardJS
        var clipboard = new ClipboardJS('.copybut');
            
        // 复制成功时的提示
        clipboard.on('success', function(e) {
            $.toast('复制成功！');
            e.clearSelection(); // 清除选中状态
        });
            
        // 复制失败时的提示
        clipboard.on('error', function(e) {
            $.toast('复制失败！', "cancel");
        });
		
		// canvas生成图片
		$("#btn").on("click", function () {
			var getPixelRatio = function (context) { // 获取设备的PixelRatio
				var backingStore = context.backingStorePixelRatio ||
					context.webkitBackingStorePixelRatio ||
					context.mozBackingStorePixelRatio ||
					context.msBackingStorePixelRatio ||
					context.oBackingStorePixelRatio ||
					context.backingStorePixelRatio || 0.5;
				return (window.devicePixelRatio || 0.5) / backingStore;
			};
			//生成的图片名称
			var imgName = "sk{$v.fabric_code}.jpg";
			var shareContent = document.getElementById("imgDiv");
			var width = shareContent.offsetWidth;
			var height = shareContent.offsetHeight;
			var canvas = document.createElement("canvas");
			var context = canvas.getContext('2d');
			var scale = getPixelRatio(context); //将canvas的容器扩大PixelRatio倍，再将画布缩放，将图像放大PixelRatio倍。
			canvas.width = width * scale;
			canvas.height = height * scale;
			canvas.style.width = width + 'px';
			canvas.style.height = height + 'px';
			context.scale(scale, scale);

			var opts = {
				scale: 1,//scale,   输出像素倍数
				canvas: canvas,
				width: width,
				height: height,
				windowWidth:document.body.scrollWidth,
				windowHeight:document.body.scrollHeight,
				x:0,
				y:window.pageYOffset,
				dpi: window.devicePixelRatio
			};
			html2canvas(shareContent, opts).then(function (canvas) {
				context.imageSmoothingEnabled = false;
				context.webkitImageSmoothingEnabled = false;
				context.msImageSmoothingEnabled = false;
				var dataUrl = canvas.toDataURL('image/jpeg', 1.0);
				dataURIToBlob(imgName, dataUrl, callback);
			});
		});
	});
	
	var dataURIToBlob =  function (imgName, dataURI, callback) {
	     var binStr = atob(dataURI.split(',')[1]),
	         len = binStr.length,
	         arr = new Uint8Array(len);
			
	     for (var i = 0; i < len; i++) {
	         arr[i] = binStr.charCodeAt(i);
	     }
			
	     callback(imgName, new Blob([arr]));
	 }
			
	 var callback = function (imgName, blob) {
	     var triggerDownload = $("<a>").attr("href", URL.createObjectURL(blob)).attr("download", imgName).appendTo("body").on("click", function () {
	         if (navigator.msSaveBlob) {
	             return navigator.msSaveBlob(blob, imgName);
	         }
	     });
	     triggerDownload[0].click();
	     triggerDownload.remove();
	 };
</script>
</body>
</html>